<template>
	<view class="search-model">
		<view class="search-input">
			<text class="city-select" @click="goPage('/pagesA/cityselect/cityselect')">{{city}}</text>
			<input class="search-input-model" type="text" @click="selectAddress" disabled>
			<text class="go-map" @click="goPage('/pagesB/map/map')">{{$t('mapFindHouse')}}</text>
		</view>
		<view class="search-house-type">
			<view class="house-type-item" v-for="item in houseTypeList" :key="item.name">
				<image class="house-type-img" :src="item.img" mode=""></image>
				<text class="house-type-text">{{item.name}}</text>
			</view>
		</view>
		<view class="search-filter">
			<view class="filter-item" @click="handleFilter(item.type)" v-for="item in houseFilterType" :key="item.name">
				{{item.name}} </view>
			<up-icon name="arrow-downward"></up-icon>
		</view>
		<view class="search-dialog" v-if="curFilter === 'area'">
			<view class="list-wrap">
				<view class="one-list" v-if="oneList.length>0">
					<view :class="['list-item', oneValue===item.value?'active':'']" @click="handleOne(item.value)" v-for="(item,index) in oneList" :key="item.value">{{item.label}}</view>
				</view>
				<view class="two-list" v-if="twoList.length>0">
					<view :class="['list-item', twoValue===item.value?'active':'']" v-for="(item,index) in twoList" @click="handleTwo(item.value)" :key="item.value">{{item.label}}</view>
				</view>
				<view class="three-list" v-if="threeList.length>0">
					<view :class="['list-item', threeValue===item.value?'active':'']" v-for="(item,index) in threeList" @click="handleThree(item.value)" :key="item.value">{{item.label}}</view>
				</view>
			</view>
			<button type="warn" @click="handleSearch">确认</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const city = ref('北京')
	const emits = defineEmits(['doSearch'])
	const houseTypeList = ref([{
			name: '找商铺',
			img: '/static/type1.png',
		},
		{
			name: '找写字楼',
			img: '/static/type1.png',
		},
		{
			name: '找小区',
			img: '/static/type1.png',
		},
	])
	const houseFilterType = ref([{
			type: 'area',
			name: '区域'
		},
		{
			type: 'price',
			name: '价格',
		},
		{
			type: 'houseType',
			name: '户型'
		},
		{
			type: 'filter',
			name: '筛选'
		}
	])
	const oneList = ref([{
			label: '附近',
			value: 1
		},
		{
			label: '区域',
			value: 2
		},
		{
			label: '地铁',
			value: 3
		}
	])
	const twoList = ref([])
	const threeList = ref([])
	const threeValue = ref()
	const oneValue = ref()
	const selectAddress = () => {
		uni.chooseLocation({
			success(res) {
				console.log(res)
				emits('doSearch',{...res})
			}
		})
	}
	const handleOne = (value) => {
		console.log(value)
		oneValue.value = value
		twoValue.value = ''
		threeValue.value = ''
		twoList.value = []
		threeList.value = []
		// 调用接口获取当前点击的数据的下一级数据
		setTimeout(() => {
			switch (value){
				case 1:
					twoList.value = [
						{label:'南口镇',value: '1-1'}
					]
					break;
				case 2:
					twoList.value = [
						{label:'全北京',value: '2-1'},
						{label: '朝阳', value: '2-2'}
					]
					break;
				case 3:
					twoList.value = [
						{label:'13号线',value: '3-1'},
						{label: '昌平线', value: '3-2'}
					]
					break;
				default:
					break;
			}
			
		}, 2000)
	}
	const twoValue = ref()
	const handleTwo = (value) => {
		console.log(value)
		twoValue.value = value
		threeList.value = []
		threeValue.value = ''
		// 调用接口获取当前点击的数据的下一级数据
		setTimeout(() => {
			switch (value){
				case '1-1':
					threeList.value = [
						{label:'南口镇',value: '1-1'}
					]
					break;
				case '2-1':
					threeList.value = [
						{label:'全北京',value: '2-1'},
						{label: '朝阳', value: '2-2'}
					]
					break;
				case '3-1':
					threeList.value = [
						{label:'13号线',value: '3-1'},
						{label: '昌平线', value: '3-2'}
					]
					break;
				default:
					break;
			}
			
		}, 2000)
	}
	const handleThree = (value) => {
		threeValue.value = value
	}
	const goPage = (path) => {
		uni.$on('changeCity', (cityInfo) => {
			city.value = cityInfo
		})
		uni.navigateTo({
			url: path
		})
	}
	const curFilter = ref('')
	const handleFilter = (name) => {
		console.log(name)
		curFilter.value = name
	}
	const doLocation = () => {
		uni.getLocation({
			success: function(res) {
				console.log(res)
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
			},
			fail: function(err) {
				console.log(err)
			}
		})
	}
	doLocation()
	const handleSearch = () => {
		curFilter.value = ''
		emits('doSearch', {oneValue: oneValue.value, twoValue: twoValue.value, threeValue: threeValue.value})
	}
</script>

<style lang="scss" scoped>
	.search-input,
	.search-house-type,
	.search-filter {
		display: flex;
		align-items: center;
	}

	.search-input {
		justify-content: space-evenly;
		padding: 20rpx;

		.search-input-model {
			width: 500rpx;
			background: #F4F4F4;
			padding: 10rpx;
			border: 1px solid #CCC;
		}
	}

	.search-house-type {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;

		.house-type-item {
			display: flex;
			align-items: center;
			flex-direction: column;

			.house-type-img {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}

	.search-filter {
		display: flex;
		justify-content: space-around;
		border: 1px solid #000;
		border-left: none;
		border-right: none;
		padding: 10rpx 0;

		.filter-item {}
	}

	.search-dialog {
		height: calc(100vh - 335rpx);
		background: #CCC;

		.list-wrap {
			display: flex;
			height: calc(100% - 100rpx);
			.one-list {
				width: 220rpx;
				background: #fff;
			}

			.two-list {
				width: 230rpx;
				background: #fafafa;
			}

			.three-list {
				flex: 1;
				background: #f7f7f7;
			}

			.list-item {
				padding: 20rpx;
				&.active{
					color: #ff0000;
				}
			}
		}
	}
</style>